<template>
  <view>
    <view class="class-container">
      <image src="../../static/images/dev.png" mode="aspectFill"/>
    </view>
    <u-tabbar v-model="currentTabPage" :list="tabbarList" active-color="#f4756b" inactive-color="#888" @change="changeTabPage"></u-tabbar>
  </view>
</template>

<script>
    export default {
        name: "class",
        data() {
            return {
                tabbarList: [
                    {
                        iconPath: "home",
                        selectedIconPath: "home-fill",
                        text: '社区',
                        customIcon: false,
                    },
                    {
                        iconPath: "bookmark",
                        selectedIconPath: "bookmark-fill",
                        text: '课程',
                        customIcon: false,
                    },
                    {
                        iconPath: "chat",
                        selectedIconPath: "chat-fill",
                        text: '消息',
                        customIcon: false,
                    },
                    {
                        iconPath: "account",
                        selectedIconPath: "account-fill",
                        text: '我的',
                        customIcon: false,
                    },
                ],
                currentTabPage: 1
            }
        },
        methods: {
            changeTabPage(index) {
                switch (index) {
                    case 0:
                        uni.redirectTo({
                            url: `/pages/home/home`
                        });
                        break;
                    case 1:
                        uni.redirectTo({
                            url: `/pages/class/class`
                        });
                        break;
                    case 2:
                        uni.redirectTo({
                            url: `/pages/chatList/chatList`
                        });
                        break;
                    case 3:
                        uni.redirectTo({
                            url: `/pages/me/me`
                        });
                        break;
                }
            }
        },
        mounted() {

        }
    }
</script>

<style lang="scss" scoped>
  .class-container {
    width: 100%;
    height: 100vh;
    text-align: center;
    padding-top: 30vh;

    image {
      width: 70vw;
      margin: 0 auto;
    }
  }
</style>